<template>
  <div>
    <Topbar></Topbar>
    <div style="margin-top: 100px;background-color: cadetblue;" class="container">
      <div class="content">
        <el-card style="width: 99.5%;background-color: aliceblue;height: 70px;float:left">
          <el-input
              placeholder="请输入关键词"
              v-model="InPut"
              style="width: 30%"
              clearable>
          </el-input>

          <el-button icon="el-icon-search" type="info" plain @click="search()"> 搜索</el-button>
          <el-button plain type="danger" icon="el-icon-delete"  @click="Delete()" >删除</el-button>

        </el-card>

        <el-table
            ref="filterTable"
            :data="filterData"
            border
            style="width: 100%"
            max-height="320"
            @select="handleSelectionChange"
            @select-all="handleSelectAll"
           >
          <el-table-column
              fixed="left"
              label="全选"
              width="50"
              type="selection">
          </el-table-column>
          <el-table-column
              prop="time"
              label="时间"
              width="200"
              sortable>

          </el-table-column>
          <el-table-column
              fixed
              prop="id"
              label="工号"
              width="120">
          </el-table-column>
          <el-table-column
              prop="name"
              label="姓名"
              width="120">
          </el-table-column>

          <el-table-column
              prop="states"
              label="状况"
              width="120">
          </el-table-column>
        </el-table>
      </div>

    </div>
  </div>


</template>

<script>
import Topbar from "@/components/Topbar.vue";
export default {
  methods: {

    Delete(){

      for(let i=0;i<this.checked.length;i++)
      {
        this.$axios.post('http://localhost:8090/atable1/remove',this.checked[i],{
          headers: {
            'Content-Type': 'application/json',
          }
        })
            .then(response => {
              console.log(this.checked);

            })
            .catch(error => {
              console.error(error);

              // 处理出错情况，例如显示错误信息等等
            });
      }
      this.checked=[];

//全选的删除
    },
    handleSelectionChange(value){


      this.checked.push(value[this.checkednum].id);
      this.checkednum++;

    },
    handleSelectAll(value) {


      this.checked = [];
      this.checkednum = value.length - 1;

      value.forEach(item => {
        this.checked.push(item.id); // 将选中行的id添加到checked数组中
      });
    },
    search(){
      this.searchText=this.InPut;
    },

  },
  name: "role1Intwo",
  components: {Topbar},
  mounted(){

    this.$axios.post('http://localhost:8090/atable1/get',null ,{
      headers: {
        'Content-Type': 'application/json',
      }
    })
        .then(response => {
          this.worker=response.data;
          console.log(this.worker);
          // 请求返回数据后，调用 filterData 方法进行数据过滤

        })
        .catch(error => {
          console.error(error);
          // 处理出错情况，例如显示错误信息等等
        });

  },
  data() {
    return {
      u:'',
      searchText:'',
      checkAll:false,
      Addview:false,
      checkednum:0,
      checked:[
        {
          id:'',

        }
      ],
      isIndeterminate: true,
      Name: '',
      InPut:'',
      dialogVisible:false,

      worker:[{
        id: '',
        name:'',
        states:'',
        workhour:'',
        time:'',
      }]

    }
  },
  computed:{
    filterData(){

      const searchText =this.searchText.trim().toLowerCase();//大写转小写
      if(!searchText){
        return this.worker;
      }
      else{
        return this.worker.filter((item) =>{
              console.log(item);
          return(
              item.time.toLowerCase().includes(searchText)||
              item.id.toLowerCase().includes(searchText)||
              item.name.toLowerCase().includes(searchText)
          );

        })
      }
    },
  },
}

</script>

<style scoped>
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;
  margin-left: 400px;
  height: 500px;
  width: 55%;
}
.content{
  width: 80%;
  text-align: center;
  align-content: center
}
</style>